<template>
    <div class="person">
        <h2>一辆{{ car.brand }},价值{{ car.price }}</h2>
        <button @click="changecarPri">修改汽车的价格</button>
        <h2>游戏列表：</h2>
        <ul>
            <li v-for="p in games" :key="p.id">{{ p.name }}</li>
        </ul>
        <button @click="changeFirstName">修改第一个游戏的名字</button>
        <hr>
    
        <h2>{{ obj.a.b.c }}</h2>
        <button @click="changeObj">点击修改obj</button>
    </div>
</template>
<script lang="ts" setup name="Person">
    import { ref,reactive } from 'vue';
    //数据
    let car = ref({brand:'奔驰',price:100});
    console.log(car);
    let games = ref([
        {id:'01',name:'原神'},
        {id:'02',name:'王者荣耀'},
        {id:'03',name:'三国志'},
    ])
    

    let obj = ref({
        a:{
            b:{
                c:666
            }
        }
    })

    //方法
   function changecarPri(){
    console.log(car.value)
    car.value.price+=10;
    
   } 
   function changeFirstName(){
    games.value[0].name = "流行蝴蝶剑"
   }

   function changeObj(){
    console.log(obj.value);
    obj.value.a.b.c = 888;
    
   }

</script>
<style scoped>
    .person{
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>